<template>
  <div>
    <a-modal
      :title="isEditor == true ? '编辑管理员' : '新增管理员'"
      :visible="visible"
      okText="确定"
      cancelText="取消"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <div>
        <!-- 账户 -->
        <a-row
          type="flex"
          justify="space-around"
          align="middle"
          style="margin-bottom: 10px"
        >
          <a-col :span="4">账户</a-col>
          <a-col :span="20">
            <a-input
              v-model:value="apiData.username"
              :disabled="isEditor"
              placeholder="请输入新增管理员的账户"
              allow-clear
            />
          </a-col>
        </a-row>
        <!-- 真实名称 -->
        <a-row
          type="flex"
          justify="space-around"
          align="middle"
          style="margin-bottom: 10px"
        >
          <a-col :span="4">姓名</a-col>
          <a-col :span="20">
            <a-input
              v-model:value="apiData.userNickname"
              placeholder="请输入新增管理员的真实名称"
              allow-clear
            />
          </a-col>
        </a-row>
        <!-- 头像 -->
        <a-row type="flex" justify="space-around" align="middle">
          <a-col :span="4">头像</a-col>
          <a-col :span="20">
            <upload
              :maxNum="1"
              @imags="getImages"
              :hasAvatar="apiData.userAvatar"
            />
          </a-col>
        </a-row>
        <!-- 角色 -->
        <a-row
          type="flex"
          justify="space-around"
          align="middle"
          style="margin-bottom: 10px"
          v-show="!isEditor"
        >
          <a-col :span="4">所属角色</a-col>
          <a-col :span="20">
            <a-select
              style="width: 180px"
              placeholder="请选择管理员角色"
              :value="apiData.role"
              @change="roleChange"
            >
              <a-select-option
                :value="item.id"
                v-for="(item, index) in roleSelectOption"
                :key="index"
              >
                {{ item.roleDesc }}
              </a-select-option>
            </a-select>
          </a-col>
        </a-row>
        <!-- 仓库角色  编辑不展示-->
        <a-row
          type="flex"
          justify="space-around"
          align="middle"
          style="margin-bottom: 10px"
          v-show="!isEditor"
        >
          <a-col :span="4">所属仓库</a-col>
          <a-col :span="20">
            <a-select
              placeholder="请选择所属仓库"
              style="width: 180px"
              :value="apiData.storeHoseId"
              @change="storeRoomChange"
            >
              <a-select-option
                :value="item.id"
                :disabled="item.srStatus.value != '0'"
                v-for="(item, index) in cangSelectOption"
                :key="index"
              >
                {{ item.srName }}
              </a-select-option>
            </a-select>
          </a-col>
        </a-row>

        <!-- 密码 -->
        <a-row type="flex" justify="space-around" align="middle">
          <a-col :span="4">密码</a-col>
          <a-col :span="20">
            <a-input-password
              v-model:value="apiData.password"
              placeholder="请输入管理员密码"
              allow-clear
            />
          </a-col>
        </a-row>
      </div>
    </a-modal>
  </div>
</template>
<script>
import Upload from '@/views/common/upload'
import { adminRole, addNewManager, modifySubAdminInfo } from '@/api/manager'
import { storehouse } from '@/api/storeroom'

export default {
  components: {
    Upload,
  },
  data() {
    return {
      ModalText: 'Content of the modal',
      visible: false,
      confirmLoading: false,
      // 角色select
      roleSelectOption: [],
      // 所属仓库select
      cangSelectOption: [],

      // 新增代理数据
      apiData: {
        id: '',
        role: '',
        password: '',
        storeHoseId: '',
        userAvatar: '',
        userNickname: '',
        username: '',
      },
      // 是否是编辑
      isEditor: false,
    }
  },
  created() {
    this.focus()
    this.focusStoreRoom()
  },
  methods: {
    /**
     * 获得图片
     */
    getImages(e) {
      // 这里必定是一张图片 或者没有图片
      if (e.length === 1 && e[0].hasOwnProperty('response')) {
        this.apiData.userAvatar = e[0].response.picUrl
      } else {
        this.apiData.userAvatar = ''
      }
      console.log(this.apiData)
    },
    /**
     * 角色select
     */
    focus(e) {
      adminRole().then((res) => {
        this.roleSelectOption = res.queryResult.list
        this.roleOpen = true
      })
    },
    /**
     * 角色选择
     */
    roleChange(e) {
      this.apiData.role = e
    },
    /**
     * 仓库绑定
     */
    focusStoreRoom(e) {
      storehouse('1').then((res) => {
        this.cangSelectOption = res.queryResult.list
      })
    },
    /**
     * 角色选择
     */
    storeRoomChange(e) {
      this.apiData.storeHoseId = e
    },
    /**
     * 展示弹窗
     */
    showModal() {
      this.visible = true
    },
    /**
     * 取消弹窗
     */
    handleOk(e) {
      if (this.isEditor) {
        this.modifiyAdminInfo()
      } else {
        this.addManager()
      }
    },
    /**
     * 修改管理员
     */
    modifiyAdminInfo() {
      var form = {
        id: this.apiData.id,
        userNickname: this.apiData.userNickname,
        userAvatar: this.apiData.userAvatar,
      }
      console.log(this.apiData.password);
      
      if (this.apiData.password !== '' || this.apiData.password !== null) {
        form.password = this.apiData.password
      }
      modifySubAdminInfo(form).then((res) => {
        this.$message.success('修改成功')
        this.handleCancel()
        this.$parent.managerList()
      })
    },
    /**
     * 添加管理员
     */
    addManager() {
      if (this.jugeFormDataHasWrite()) {
        this.confirmLoading = true
        addNewManager(this.apiData).then((res) => {
          this.$message.success('添加成功')
          this.handleCancel()
          this.$parent.managerList()
        })
      }
    },
    handleCancel(e) {
      this.visible = false
      this.isEditor = false
      this.confirmLoading = false
      this.declearData()
    },
    /**
     * 判断是否表单数据都填写了
     */
    jugeFormDataHasWrite() {
      if (this.apiData.username === '') {
        this.$message.error('请填写管理账户')
        return false
      }
      if (this.apiData.userNickname === '') {
        this.$message.error('请填写管理姓名')
        return false
      }
      if (this.apiData.userAvatar === '') {
        this.$message.error('请上传管理头像')
        return false
      }
      if (this.apiData.role === '') {
        this.$message.error('请选择管理角色')
        return false
      }
      if (this.apiData.storeHoseId === '') {
        this.$message.error('请给管理分配仓库')
        return false
      }
      if (this.apiData.password === '') {
        this.$message.error('请输入管理员密码')
        return false
      }
      return true
    },
    declearData() {
      var form = {
        role: '',
        password: '',
        storeHoseId: '',
        userAvatar: '',
        userNickname: '',
        username: '',
      }
      this.apiData = Object.assign(form)
    },
  },
}
</script>
